<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>烟园疫苗预约后台</title>
		<!-- 引入 layui.css -->
		<link rel="stylesheet" href="//unpkg.com/layui@2.6.7/dist/css/layui.css">
		<script src="js/axiox.min.js"></script>
		<!-- 引入 layui.js -->
		<script src="//unpkg.com/layui@2.6.7/dist/layui.js">
			< script src = "js/vue.js"
			type = "text/javascript"
			charset = "utf-8" >
		</script>
	</head>
	<body>
		<div id="app">
			<div class="layui-nav">
				<ul lay-filter="">
					<li class="layui-nav-item layui-nav-itemed"><a href="./index.html">疫苗接种预约小程序后台</a>
					</li>
					<li class="layui-nav-item">
						<a href="./add.html">添加预约时段</a>
					</li>
					<li class="layui-nav-item"><a href="./import.html">导入可接种数据</a></li>
					<li class="layui-nav-item"><a href="./viewer.html">查看全部数据</a></li>
				</ul>


			</div>
			<div style="margin-top: 50px;">
				<form class="layui-form" method="post" action="">
					<div class="layui-form-item">
						<label class="layui-form-label">疫苗数量：</label>
						<div class="layui-input-inline">
							<input v-model="dose_num" @change="change_dose_can()" type="text" name="dose_num" required
								lay-verify="required" placeholder="请输入疫苗数量" autocomplete="off" class="layui-input">
						</div>
					</div>
					<!--
					<div class="layui-form-item">
						<label class="layui-form-label">疫苗预留数</label>
						<div class="layui-input-inline">
							<input type="text"v-model="dose_required_num" name="dose_required_num"  required lay-verify="required"
								placeholder="如不需要预留可填0" autocomplete="off" class="layui-input">
						</div>
						<label>如不需要预留可填0</label>

					</div>
					-->
					<div class="layui-form-item">
						<label class="layui-form-label">接种时间</label>
						<div class="layui-input-inline">
							<input type="datetime-local" v-model="dose_start_time_block" name="dose_start_time_block"
								required lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">结束时间</label>
						<div class="layui-input-inline">
							<input type="datetime-local" v-model="dose_end_time_block" name="dose_end_time_block"
								required lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">可预约数量</label>
						<div class="layui-input-inline">
							<input type="text" v-model="dose_can_num" name="dose_can_num" value="" required
								lay-verify="required" placeholder="建议为:疫苗数量*105%" autocomplete="off"
								class="layui-input">

						</div>
						<label>默认为:疫苗数量*105%</label>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">已预约数量</label>
						<div class="layui-input-inline">
							<input type="text" v-model="dose_had_num" required lay-verify="required" placeholder=""
								autocomplete="off" class="layui-input">

						</div>
						<label>默认为0</label>


					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">疫苗品牌</label>
						<div class="layui-input-inline">
							<input class="layui-input" v-model="dose_type" />
						</div>
						<label>0是国药 1是科兴</label>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">疫苗是否为第一针</label>
						<div class="layui-input-inline">
							<input class="layui-input" v-model="is_firstdose" />


						</div>
						<label>0是第二针 1是第一针 </label>
					</div>

					<!--第一针接种时间何时之前可接种-->
					<div class="layui-form-item" v-if="is_firstdose==0">
						<label class="layui-form-label">第一针接种时间何时之前可接种：</label>
						<div class="layui-input-inline" style="width: auto;">
							<input v-model="dose_before_time" type="datetime-local" name="dose_before_time"
								lay-verify="required" class="layui-input">
						</div>

					</div>


					<div class="layui-form-item">
						<div class="layui-input-block">
							<button class="layui-btn" lay-submit lay-filter="formDemo" @click="add()">立即添加</button>
							<button type="reset" class="layui-btn layui-btn-primary">重置</button>
						</div>
					</div>
				</form>
				<div>

				</div>
			</div>
		</div>
	</body>
</html>


<script src="./js/vue.js"></script>
<script src="js/axiox.min.js"></script>
<script>
	function getUrlParam(name) {
		var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
		var r = window.location.search.substr(1).match(reg); //匹配目标参数
		if (r != null) return unescape(r[2]);
		return null; //返回参数值
	}
	//注意：导航 依赖 element 模块，否则无法进行功能性操作
	var app = new Vue({
		el: '#app',
		data: {
			id: -1,
			url: 'https://test.tabt.cc:81',
			mode: 0, //0为新增 1为修改
			dose_num: '', //疫苗数量
			dose_start_time_block: '', //开始时间
			dose_end_time_block: '', //结束时间
			dose_had_num: 0, //已预约数
			dose_can_num: '', //可预约数
			is_firstdose: 1, //是否第一针
			dose_type: 0, //厂家
			dose_before_time: '', //第一针之前的时间
		},
		created() {
			var that = this;
			var timeid = getUrlParam('id');
			this.id = timeid;
			if (timeid > 0) {
				this.mode = 1; //变为修改模式
				axiox({
					method: 'GET',
					url: this.url + '/api/GetVaccineById',
					data: {
						id: timeid,
					}
				}).then(function(res) {
					//res.data
					var json_data = JSON.parse(JSON.stringify(res.data));
					that.dose_num = json_data.doses;
					that.dose_can_num = json_data.doses_available;
					that.dose_had_num = json_data.doses_reserved;
					that.dose_start_time_block = json_data.start_time;
					that.dose_end_time_block = json_data.end_time;
					that.is_firstdose = json_data.is_first_dose;
					that.dose_type = json_data.manufacturer; //厂家
					that.dose_before_time = json_data.valid_before; //打第二针的限制性要求！！！
				})
			}
		},
		methods: {
			add: function() {
				var that = this;
				if (this.mode == 0) {
					//新增模式
					axios({
						mode: 'POST',
						url: this.url + '/api/AddVaccine',
						data: {
							//
							start_time: that.dose_start_time_block,
							end_time: that.dose_end_time_block,
							doses: that.dose_num,
							doses_available: that.dose_can_num,
							doses_reserved: that.dose_had_num,
							is_first_dose: that.is_firstdose,
							manufacturer: that.dose_type,
							valid_before: that.dose_before_time
						}
					}).then(function(res) {
						var res_json = JSON.parse(JSON.stringify(res.data));
						console.log(res_json);
						if (res_json.success == 1) {
							alert("操作成功！");
							location.reload();
						} else {
							alert("操作失败")
						}
						//res.data
					})
				}
				if (this.mode == 1) {
					//修改模式
					axios({
						mode: 'POST',
						url: this.url + '/api/UpdataVaccine',
						data: {
							//
							id: that.id,
							start_time: that.dose_start_time_block,
							end_time: that.dose_end_time_block,
							doses: that.dose_num,
							doses_available: that.dose_can_num,
							doses_reserved: that.dose_had_num,
							is_first_dose: that.is_firstdose,
							manufacturer: that.dose_type,
							valid_before: that.dose_before_time
						}
					}).then(function(res) {
						//res.data
						var res_json = JSON.parse(JSON.stringify(res.data));
						console.log(res_json);
						if (res_json.success == 1) {
							alert("操作成功！");
							location.reload();
						} else {
							alert("操作失败")
						}
					})
				}
			},
			change_dose_can: function() {
				this.dose_can_num = parseInt(this.dose_num * 1.05);
			}
		}
	});
</script>
